<template>
  <a-form-item-rest>
    <div class="area-select">
      <!--省份-->
      <a-select v-model:value="province" @change="proChange" allowClear :disabled="disabled">
        <template v-for="item in provinceOptions" :key="`${item.value}`">
          <a-select-option :value="item.value">{{ item.label }}</a-select-option>
        </template>
      </a-select>
      <!--城市-->
      <a-select v-if="level >= 2" v-model:value="city" @change="cityChange" :disabled="disabled">
        <template v-for="item in cityOptions" :key="`${item.value}`">
          <a-select-option :value="item.value">{{ item.label }}</a-select-option>
        </template>
      </a-select>
      <!--地区-->
      <a-select v-if="level >= 3" v-model:value="area" @change="areaChange" :disabled="disabled">
        <template v-for="item in areaOptions" :key="`${item.value}`">
          <a-select-option :value="item.value">{{ item.label }}</a-select-option>
        </template>
      </a-select>
    </div>
  </a-form-item-rest>
</template>
<script lang="ts">
  import { defineComponent, PropType, ref, reactive, watchEffect, computed, unref, watch, onMounted, onUnmounted, toRefs } from "vue"
  import { propTypes } from "/@/utils/propTypes"
  import { useRuleFormItem } from "/@/hooks/component/useFormItem"
  import { provinceOptions, getDataByCode, getRealCode } from "../../utils/areaDataUtil"

  export default defineComponent({
    name: "JAreaSelect",
    props: {
      value: [Array, String],
      province: [String],
      city: [String],
      area: [String],
      level: propTypes.number.def(3),
      disabled: propTypes.bool.def(false),
      codeField: propTypes.string,
      size: propTypes.string,
      placeholder: propTypes.string,
      formValues: propTypes.any,
      allowClear: propTypes.bool.def(false),
      getPopupContainer: {
        type: Function,
        default: (node) => node.parentNode,
      },
    },
    emits: ["change", "update:value", "update:area", "update:city", "update:province"],
    setup(props, { emit, refs }) {
      const emitData = ref<any[]>([])
      //下拉框的选择值
      const pca = reactive({
        province: "",
        city: "",
        area: "",
      })
      //表单值
      const [state] = useRuleFormItem(props, "value", "change", emitData)
      //城市下拉框的选项
      const cityOptions = computed(() => {
        return pca.province ? getDataByCode(pca.province) : []
      })
      //地区下拉框的选项
      const areaOptions = computed(() => {
        return pca.city ? getDataByCode(pca.city) : []
      })
      /**
       * 监听props值
       */
      watchEffect(() => {
        props && initValue()
      })

      /**
       * 监听组件值变化
       */
      watch(pca, (newVal) => {
        if (!props.value) {
          emit("update:province", pca.province)
          emit("update:city", pca.city)
          emit("update:area", pca.area)
        }
      })
      /**
       * 数据初始化
       */
      function initValue() {
        if (props.value) {
          //传参是数组的情况下的处理
          if (Array.isArray(props.value)) {
            pca.province = props.value[0]
            pca.city = props.value[1] ? props.value[1] : ""
            pca.area = props.value[2] ? props.value[2] : ""
          } else {
            //传参是数值
            let valueArr = getRealCode(props.value, props.level)
            if (valueArr) {
              pca.province = valueArr[0]
              pca.city = props.level >= 2 && valueArr[1] ? valueArr[1] : ""
              pca.area = props.level >= 3 && valueArr[2] ? valueArr[2] : ""
            }
          }
        } else {
          //绑定三个数据的情况
          pca.province = props.province ? props.province : ""
          pca.city = props.city ? props.city : ""
          pca.area = props.area ? props.area : ""
        }
      }

      /**
       * 省份change事件
       */
      function proChange(val) {
        pca.city = val && getDataByCode(val)[0]?.value
        pca.area = pca.city && getDataByCode(pca.city)[0]?.value
        state.value = props.level <= 1 ? val : props.level <= 2 ? pca.city : pca.area
        emit("update:value", unref(state))
      }

      /**
       * 城市change事件
       */
      function cityChange(val) {
        pca.area = val && getDataByCode(val)[0]?.value
        state.value = props.level <= 2 ? val : pca.area
        emit("update:value", unref(state))
      }

      /**
       * 区域change事件
       */
      function areaChange(val) {
        state.value = val
        emit("update:value", unref(state))
      }

      return {
        ...toRefs(pca),
        provinceOptions,
        cityOptions,
        areaOptions,
        proChange,
        cityChange,
        areaChange,
      }
    },
  })
</script>
<style lang="less" scoped>
  .area-select {
    width: 100%;
    display: flex;

    .ant-select {
      width: 33.3%;
    }

    .ant-select:not(:first-child) {
      margin-left: 10px;
    }
  }
</style>
